<template>
  <div class="catalog-wrapper">
    <div class="all-example">所有示例</div>
    <ul class="catalog-box">
      <li class="item" v-for="(item, index) in allCatalog" :key="index">
        <a href="" @click.prevent="customerAnchor(item)">{{item.text}}</a>
      </li>
    </ul>

  </div>
</template>
<script>

export default {
  name: 'Catalog',
  props: {
    catalog: {
      default: () => {
        return [];
      }
    }
  },
  methods: {
    customerAnchor (catalog) {
      let anchorElement = document.getElementById(catalog.id);
      if (anchorElement) {
        anchorElement.scrollIntoView();
      }
    }
  },
  data () {
    return {
      allCatalog: []
    };
  },
  mounted () {
    this.allCatalog = this.catalog;
    let parentDom = this.$parent.$el;
    let exampleDom = Array.prototype.slice.call(parentDom.querySelectorAll('.example'));
    this.allCatalog = exampleDom.map(example => {
      return {
        text: example.querySelector('.example-title').innerText,
        id: example.getAttribute('id')
      };
    });
    this.$EventBus.$on('ExampleHasSetId', () => {
      this.allCatalog = exampleDom.map(example => {
        return {
          text: example.querySelector('.example-title').innerText,
          id: example.getAttribute('id')
        };
      });
    });
  }
};
</script>
<style scoped lang="scss">
.catalog-wrapper {
  position: fixed;
  right: 0;
  top: 100px;
  transition: transform 0.3s;
  z-index: 100;

  &:hover {
    cursor: pointer;
    transform: translateX(-155px);
  }

  .all-example {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    right: 0;
    border: 1px solid #e1e1e1;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px #e3e3e3;
    cursor: default;
    z-index: 1;
    background: #fff;
    line-height: 1;
  }

  .catalog-box {
    box-sizing: border-box;
    margin: 0;
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 150px;
    background: #eee;
    padding: 15px;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    box-shadow: 0 0 5px #e3e3e3;
    transition: right 0.3s;

    .item {
      list-style: none;
      padding-bottom: 15px;

      &:last-child {
        padding-bottom: 0;
      }

      a {
        text-decoration: none;
        color: #308ee0;
      }
    }
  }

}
</style>
